<template>
	<view class="container">
		<Header title="积分助力"></Header>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input class="text-shadow" :adjust-position="false" type="text" placeholder="请输入名称"
					confirm-type="search" @blur="InputBlur"></input>
			</view>
			<view class="action" @click="searchOrganization()">
				<button class="cu-btn bg-gradual-orange2 shadow-blur round">搜索</button>
			</view>
		</view>
		<view>
			<view style="width: 100%;overflow: auto;">
				<view class="padding-top-sm">
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="(item,index) in organizationList" :key="index">
							<view class="cu-avatar round lg" >
								<image class="cu-avatar round lg" :src="item.organizationLogo"></image>
							</view>
							<view class="content" style="margin-right: 20rpx;">
								<view class="text-black" style="font-weight: 560;font-size: 28rpx;">
									{{item.organizationName}}
								</view>
								<view class="text-gray text-sm flex">
									<text class="text-cut">
										<!-- <text class="cuIcon-info text-orange" style="opacity: 0.7;"></text> -->
										共计{{item.personCountView}}人参与
									</text>
								</view>
							</view>
							<view style="text-align: center;margin-right: 20rpx;">
								<view class="text-grey text-sm">积分</view>
								<view class="cu-tag round line-orange2 tagSm">{{item.creditCountView}}
								</view>
							</view>
							<view style="text-align: center;margin-right: 10rpx;">
								<button class="cu-btn bg-red shadow-blur round" @tap="donationPoints(item)">
									助力
								</button>
							</view>
						</view>
					    <view class='loadingicon acea-row row-center-wrapper' v-if='organizationList.length > 0 && !loadend'>
							<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					    </view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view>
					<view class="cu-bar search bg-white">
						<view class="search-form round">
							<text class="cuIcon-likefill line-orange2" style="font-size: 56rpx;"></text>
							<input class="text-shadow" :adjust-position="false" type="text" placeholder="请输入爱心积分数(正整数)"
								confirm-type="search" v-model="scoreValue"></input>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="submit">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/subpages/components/header.vue'
	import {
		getUserInfo
	} from '@/api/user.js'

	import {
		getOrganizationList,
		updateOrganizationData
	} from '@/api/organization.js'

	export default {
		components: {
			Header
		},
		data() {
			return {
				organizationList: [],
				value: '',
				modalName: null,
				scoreValue: '',
				organizationInfo: {},
				userInfo: '',
				loading: false,				
				loadTitle:'加载更多',
				loadend: false, // 加载到底部
				page: 1, // 页数
				pagesize: 10, // 每页条数
			}
		},
		onLoad() {
			this.getUserInfo().then(() => {
				this.getList('');
			});
		},
		onReady() {
			
		},
		methods: {
			/**获取用户信息*/
			async getUserInfo() {
				const {data} = await getUserInfo();
				this.userInfo = data
			},
			/**获取组织数据*/
			async getList(name, isPage) {
				if (isPage) {
					this.loadend = false
					this.page = 1
					this.organizationList = []
				}
				if (this.loading) return
				if (this.loadend) return
				this.loading = true
				this.loadTitle = ''
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				const query = {
					page: this.page,
					pagesize: this.pagesize,
					organizationName: name
				}
				getOrganizationList(query).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						const list = res.data.lists
						this.loadend = list.length < this.pagesize
						this.organizationList = [...this.organizationList, ...list]
						this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多'
						this.page++
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
					this.loading = false
				});
			},
			/**查询组织*/
			searchOrganization() {
				if (this.value === null || this.value === '') {
					uni.showToast({
						title: '请输入搜索关键词！',
						icon: 'none'
					});
					return;
				}
				this.value = this.value.replace(/\s*/g, "");
				this.getList(this.value, true);
			},
			InputBlur(e) {
				this.value = e.detail.value;
			},
			InputBlur1(e) {
				this.scoreValue = +e.detail.value;
			},
			/**捐赠*/
			donationPoints(item) {
				this.organizationInfo = item;
				this.modalName = 'DialogModal1'
			},
			/**取消*/
			hideModal(e) {
				this.modalName = null;
				this.organizationInfo = {};
			},
			/**确定*/
			async submit() {
				const scoreValue = +this.scoreValue
				if (!(/(^[1-9]\d*$)/.test(scoreValue))) {
					uni.showToast({
						title: '数值不是正整数!!!',
						icon: 'none',
						duration: 2000
					});
				}else if(scoreValue < 10) {
					uni.showToast({
						title: '每次助力的积分不能小于10',
						icon: 'none',
						duration: 2000
					});
				}else if(this.userInfo.availCredit < scoreValue) {
					const availCredit = this.userInfo.availCredit > 0 ? this.userInfo.availCredit : 0
					uni.showToast({
						title: '您的积分数为' + availCredit + '，不足您的助力数',
						icon: 'none',
						duration: 2000
					});
				}else{
					const query = {
						organizationId: this.organizationInfo.organizationId,
						credit: scoreValue
					}
					updateOrganizationData(query).then(res => {
						if (res.code == 200) {
							this.getList(this.value, true);
							this.modalName = null;
							this.scoreValue = '';
						} else {
							uni.showToast({
								title: '未在该组织助力期内，可助力至公益组织内哦~',
								duration: 1000,
								icon: 'none',
							});
						}
					});
				}

			},
			formatNumber(num) {
				if (num > 10100) {
					return (num / 10000).toFixed(2) + "万";
				}
				return num;
			}
		},
		/**
		   * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
			this.getList(this.value);
		}
	}
</script>

<style scoped>
	.bg-gradual-orange2 {
		background-image: linear-gradient(45deg, #FF707A, #FD505C);
		color: #ffffff;
	}

	.line-orange2 {
		color: #FF707A;
	}
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100% - 190upx - 220upx);
	}
</style>
